<!--
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2020-11-03 17:46:23
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2020-11-05 10:46:11
-->
<template>
  <div class="section-view">
    <div class="section-view__header">
      <div class="header-left">
        <el-input
          v-model="form.title"
          autocomplete="off"
          size="small"
          placeholder="输入标题"
        />
        <el-date-picker
          v-model="form.timers"
          type="daterange"
          size="small"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
      <div class="header-right">
        <el-button size="small" class="el-submit-btn" type="primary" @click="initTable">查询</el-button>
        <el-button
          size="small"
          class="el-reset-btn"
          type="primary"
          @click="
            form = {
              page: 1,
              limit: 10
            }
          "
        >
          清空条件
        </el-button>
      </div>
    </div>
    <div class="section-view__body">
      <div class="section-view__operation">
        <el-button type="primary" size="small" @click="openDyDialog()">发布帖文</el-button>
        <!-- <el-button type="danger" size="small" @click="passRow">删除</el-button> -->
      </div>

      <el-table
        :data="tableData"
        style="width: 100%"
        :selection-change="changeFun"
      >
        <!-- <el-table-column
          type="selection"
          width="55"
        /> -->
        <el-table-column
          prop="accountName"
          label="用户姓名"
        />
        <el-table-column
          prop="content"
          label="内容"
        />
        <el-table-column
          prop="imgs"
          label="图片"
        >
          <template slot-scope="scope">
            <img v-for="(v, i) in scope.row.imgList" :key="i" :src="v.imgUrl" class="table-img" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="状态"
        >
          <template slot-scope="scope">
            {{ ['待审核','已通过', '已驳回'][scope.row.state] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="reason"
          label="驳回理由"
        />
        <el-table-column label="操作" width="210">
          <template slot-scope="scope">
            <el-button v-if="scope.row.state == 0" type="text" size="small" icon="el-icon-edit" @click="passRow(scope.row)">
              审核通过
            </el-button>
            <el-button
              v-if="scope.row.state == 0"
              type="text"
              size="small"
              icon="el-icon-circle-close"
              @click="openDialog(scope.row)"
            >
              驳回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="secton-view__page">
        <el-pagination
          v-if="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="initTable"
        />
      </div>
    </div>
    <el-dialog
      title="驳回贴文"
      width="460px"
      :close-on-click-modal="false"
      :visible.sync="infoDialogVisible"
    >
      <div class="dialog-body">
        <el-form ref="passForm" :model="editForm" class="edit-form">
          <div class="edit-form__right">
            <el-form-item
              label="驳回理由："
              :label-width="'140px'"
              prop="reason"
              :rules="[
                {
                  required: true,
                  pattern: $utils.characters,
                  message: '请输入正确的驳回理由',
                  trigger: 'blur'
                }
              ]"
            >
              <el-input v-model="editForm.reason" autocomplete="off" maxlength="100" />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="发布贴文"
      width="760px"
      :close-on-click-modal="false"
      :visible.sync="dyDialogVisible"
    >
      <div class="dialog-body">
        <el-form ref="dyForm" :model="addDyForm" class="edit-form">
          <div class="edit-form__right">
            <el-form-item
              label="贴文内容："
              :label-width="'140px'"
              prop="content"
              :rules="[
                {
                  required: true,
                  pattern: $utils.characters,
                  message: '请输入正确的贴文',
                  trigger: 'blur'
                }
              ]"
            >
              <el-input v-model="addDyForm.content" autocomplete="off" maxlength="100" />
            </el-form-item>
            <el-form-item label="图片" :label-width="'140px'">
              <el-upload
                :action="`${$baseUrl}`"
                list-type="picture-card"
                :limit="9"
                :on-change="handleChange"
                :on-exceed="handleExceed"
                :on-remove="handleRemove"
                :file-list="fileList"
                :on-success="successFile"
              >
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="submitDy">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  props: {},
  data() {
    return {
      row: {},
      tableData: [],
      treeData: [],
      addDyForm: {},
      editForm: {},
      multipleSelection: [],
      fileList: [],
      imgUrl: '',
      dyDialogVisible: false,
      infoDialogVisible: false,
      defaultProps: { children: 'children', label: 'title' },
      total: 0,
      form: {
        title: '',
        page: 1,
        limit: 10
      }
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.initTable()
  },
  methods: {
    initTable(page) {
      if (typeof page !== 'number') {
        this.form.page = 1
      }
      const form = JSON.parse(JSON.stringify(this.form))
      if (form.timers) {
        form.startTime = form.timers[0]
        form.endTime = form.timers[1]
      } else {
        form.startTime = ''
        form.endTime = ''
      }
      delete form.timers
      this.$http.get('/dynamic/queryForPage', {
        data: form
      }).then((res) => {
        if (res.success) {
          console.log(res)
          this.total = res.count
          this.tableData = res.data || []
        }
      })
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    changeFun(val) {
      this.multipleSelection = val
    },
    async openDialog(row, type) {
      this.row = row
      this.infoDialogVisible = true
      this.editForm = JSON.parse(JSON.stringify(row))
    },
    async submit() {
      this.$refs['passForm'].validate(valid => {
        if (valid) {
          this.$http.post('/dynamic/reject', this.editForm).then((res) => {
            if (res.success) {
              this.$message.success(res.msg)
              this.infoDialogVisible = false
              this.initTable()
              this.row = {}
              this.editForm = {}
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    openDyDialog() {
      this.dyDialogVisible = true
      this.addDyForm = {}
      this.fileList = []
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    submitDy() {
      this.$refs['dyForm'].validate(valid => {
        if (valid) {
          this.addDyForm.imgUrls = this.fileList.map((v) => {
            return v.imgUrl
          }).join()
          this.$http.post('/dynamic/save', this.addDyForm).then((res) => {
            if (res.success) {
              this.$message.success(res.msg)
              this.dyDialogVisible = false
              this.initTable()
              this.addDyForm = {}
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多上次9张图片`)
    },
    successFile(response, file, fileList) {
      console.log(response, file, fileList)
      file.imgUrl = response.data.filePath
    },
    passRow(row) {
      if (row.id) {
        this.$confirm('确认审核通过吗？')
          .then(() => {
            this.$http.post('/dynamic/pass', {
              id: row.id
            }).then((res) => {
              if (res.success) {
                this.$message.success(res.msg)
                this.initTable()
              }
            })
            // this.$api.sysManageApi
            //   .deletRole({
            //     id: row.id
            //   })
            //   .then(v => {
            //     this.$message.success(v.msg)
            //     this.initTable()
            //   })
          })
          .catch(() => {})
      } else if (this.multipleSelection.length) {
        this.$confirm('确认删除吗？')
          .then(() => {
            this.$api.sysManageApi
              .deletRoles({
                ids: this.multipleSelection
                  .map(v => {
                    return v.id
                  })
                  .join()
              })
              .then(v => {
                this.$message.success(v.msg)
                this.initTable()
              })
          })
          .catch(() => {})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.section-view {
  &::v-deep .el-upload-list__item {
    width: 100px;
    height: 100px;
  }
  &::v-deep .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
}
.table-img {
  max-height: 100px;
  max-width: 100px;
  margin-right: 5px;
}
</style>
